<template>
  <Frame>
    <template #main>
      <PageCard id="pageCard" title="数据分析展示">
        <div id="body">
          <div class="card" id="conferenceList">
            <el-scrollbar class="scrollbar-wrapper">
              <el-table
                :data="conferenceList"
                highlight-current-row
                style="width: 100%"
                @current-change="
                  (newSelection, _) => {
                    this.selectedConferenceId = newSelection.id;
                    this.getConferenceDetail();
                    this.selectedUserId = '';
                  }
                "
              >
                <el-table-column property="name" label="选择会议" />
              </el-table>
            </el-scrollbar>
          </div>
          <div id="dataPresentation">
            <div class="card" id="userSelect">
              <el-select
                v-model="selectedUserId"
                placeholder="请选择参会人员"
                style="width: 240px"
                @change="
                  () => {
                    this.showChart();
                    this.showConclusion();
                  }
                "
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              参会人员数量:{{ userList.length }}
            </div>

            <div class="card" id="char">
              <el-empty
                v-show="selectedUserId === ''"
                id="empty"
                :image-size="200"
              >
                <el-popconfirm
                  width="350"
                  confirm-button-text="已知晓"
                  cancel-button-text="你在教我做事？"
                  title="你说,会不会有一种可能,你没选择会议和参会人员"
                  v-show="selectedConferenceId === '' || selectedUserId === ''"
                  @cancel="
                    () => {
                      show_info_msg('行~~~', '你高兴就好 :)');
                    }
                  "
                >
                  <template #reference>
                    <el-button type="primary">我为什么会看到这个?</el-button>
                  </template>
                </el-popconfirm>
              </el-empty>
            </div>
            <div class="card" id="text">
              <p>{{ conclusion }}</p>
            </div>
          </div>
        </div>
      </PageCard>
    </template>
  </Frame>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import Frame from "../components/frame.vue";
import PageCard from "../components/pageCard.vue";
import { baseUrl } from "../main.js";
import { show_info_msg, show_success_msg, show_error_msg } from "../js/msg.js";
export default {
  name: "DataPresentation",
  components: {
    Frame,
    PageCard,
  },
  data() {
    return {
      baseUrl: baseUrl,
      conferenceList: [],
      userList: [],
      selectedUserId: "",
      detailData: {},
      selectedConferenceId: "",
      conclusion: "暂无分析结果",
    };
  },
  methods: {
    show_info_msg(title, text) {
      //外面调不到
      show_info_msg(title, text);
    },
    getConferenceList() {
      axios
        .get(this.baseUrl + "/Conference/getAllConferenceName")
        .then((response) => {
          let reData = response.data;
          if (reData.status == 200) {
            if (reData.data.length != 0) {
              this.conferenceList = reData.data;
              return;
            }
            show_error_msg("数据异常", "会议信息为空");
            return;
          }
          show_error_msg("发生错误", reData.msg);
        });
    },
    getConferenceDetail() {
      axios
        .get(
          this.baseUrl +
            "/ConferenceDetail/getDetailByConferenceId?conferenceId=" +
            this.selectedConferenceId
        )
        .then((response) => {
          let reData = response.data;
          if (reData.status == 200) {
            if (reData.data.length != 0) {
              this.userList = reData.data.map((v) => {
                return {
                  id: v.user_id,
                  name: v.name,
                };
              });
              for (let d of reData.data) {
                this.detailData[d.user_id] = [
                  {
                    name: "伤心",
                    value: d.sad,
                  },
                  {
                    name: "愤怒",
                    value: d.angry,
                  },
                  {
                    name: "惊讶",
                    value: d.surprise,
                  },
                  {
                    name: "畏惧",
                    value: d.fear,
                  },
                  {
                    name: "高兴",
                    value: d.happy,
                  },
                  {
                    name: "厌恶",
                    value: d.disgust,
                  },
                  {
                    name: "中立",
                    value: d.neutral,
                  },
                ];
              }
              return;
            }
            show_error_msg("数据异常", "本场用户信息为空");
            return;
          }
          show_error_msg("发生错误", reData.msg);
        });
    },
    showChart() {
      var chartDom = document.getElementById("char");
      var myChart = echarts.init(chartDom);
      let charOption = {
        title: {
          text: "会议数据",
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "5%",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            // roseType: "angle",
            itemStyle: {
              borderRadius: 10,
              shadowBlur: 70,
              shadowColor: "rgba(25, 44, 68, 0.2)",
            },
            padAngle: 5,
            label: {
              formatter: "{b}: {d}%",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 35,
                fontWeight: "bold",
              },
            },
            data: this.detailData[this.selectedUserId],
          },
        ],
      };
      myChart.setOption(charOption);
    },
    showConclusion() {
      //复用之前的数据
      let conclusionMap = {
        伤心: "参会人员状态不佳，需要关心与支持，寻求安慰和解决方案",
        愤怒: "参会人员情绪较激动，建议冷静沟通，寻找冲突原因，避免激化",
        惊讶: "参会人员较活跃，对会议内容关注度高",
        畏惧: "参会人员缺乏信心,对会议内容或环境存在顾虑",
        高兴: "参会人员状态佳，活跃积极，对会议内容关注的高",
        厌恶: "参会人员状态不佳，表现排斥",
        中立: "参会人员情绪平稳",
      };
      let oraginData = [];
      for (let v of this.detailData[this.selectedUserId]) {
        oraginData.push([v.name, v.value]);
      }
      console.log(oraginData);
      oraginData.sort((a, b) => {
        return b[1] - a[1];
      });
      console.log(oraginData);
      if (oraginData[0][1] == 0) {
        this.conclusion = "人员未参会,无法对数据进行分析";
        return;
      }
      if (oraginData[0][1] < 10) {
        this.conclusion = "数据量不足,无法对数据进行分析";
        return;
      }
      this.conclusion = conclusionMap[oraginData[0][0]];
    },
  },
  mounted() {
    this.getConferenceList();
  },
};
</script>

<style scoped>
#body {
  /* background-color: aquamarine; */
  margin-top: 2vh;
  height: 88%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#conferenceList {
  width: 20%;
  height: 95%;
  padding: 15px;
  border-radius: 7px;
  box-shadow: 2px 1px 7px rgb(88, 88, 88, 0.2);
  font-size: 2.5vh;
}

#dataPresentation {
  width: 85%;
  margin-left: 1vw;
  height: 95%;
  font-size: 2.5vh;
}
#userSelect {
  width: 100%;
  height: 7%;
  box-shadow: 2px 1px 7px rgb(88, 88, 88, 0.2);
  font-size: 80%;
  padding: 0.65%;
}
#userSelect > * {
  margin-right: 10px;
}
#char {
  width: 100%;
  margin-top: 0.5%;
  padding: 2px;
  height: 84%;
  box-shadow: 2px 1px 7px rgb(88, 88, 88, 0.2);
}

#empty {
  height: 98%;
}
#text {
  margin-top: 0.5%;
  padding-top: 0.75%;
  width: 100%;
  height: 7%;
  box-shadow: 2px 1px 7px rgb(88, 88, 88, 0.2);
  font-size: 75%;
  text-align: center;
}
</style>